<template>
  <div id="app">
    <el-container>
      <el-header>
        <div class="header-content">
          <div class="logo">
            <router-link to="/">宠物服务平台</router-link>
          </div>
          <div class="nav-right">
            <div class="user-section">
              <template v-if="isLoggedIn">
                <el-dropdown @command="handleCommand">
                  <div class="user-info">
                    <el-avatar :size="32" :src="userAvatar">
                      {{ userInitials }}
                    </el-avatar>
                    <span class="username">{{ username }}</span>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                      <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
              <template v-else>
                <div class="auth-buttons">
                  <el-button type="text" @click="$router.push('/login')">登录</el-button>
                  <el-button type="text" @click="$router.push('/register')">注册</el-button>
                </div>
              </template>
            </div>
            <el-button class="hamburger-btn" @click="showMobileMenu = true">
              <el-icon><Menu /></el-icon>
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>

    <!-- 移动端菜单 -->
    <el-drawer
      v-model="showMobileMenu"
      direction="rtl"
      size="240px"
      :with-header="false">
      <div class="mobile-menu">
        <div class="mobile-menu-header">
          <h3>菜单</h3>
          <el-button class="close-btn" @click="showMobileMenu = false">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        <el-menu
          :default-active="activeIndex"
          class="mobile-nav-menu"
          @select="handleMobileMenuSelect">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/services">服务列表</el-menu-item>
          <template v-if="isLoggedIn">
            <el-menu-item v-if="userType === 'user'" index="/orders">我的订单</el-menu-item>
            <el-menu-item v-if="userType === 'merchant'" index="/merchant">商家管理</el-menu-item>
            <el-menu-item index="/profile">个人中心</el-menu-item>
            <el-menu-item index="logout">退出登录</el-menu-item>
          </template>
          <template v-else>
            <el-menu-item index="/login">登录</el-menu-item>
            <el-menu-item index="/register">注册</el-menu-item>
          </template>
        </el-menu>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
  return {
    activeIndex: '/',
    userAvatar: '',
    username: '',
    isLoggedIn: false,
    showMobileMenu: false,
    userType: '' // 新增 userType 字段
  };
},
  computed: {
    userInitials() {
      if (this.username) {
        return this.username.charAt(0).toUpperCase()
      }
      return ''
    }
  },
  created() {
    // 检查登录状态
    this.checkLoginStatus()
    // 监听路由变化
    this.$router.afterEach((to) => {
      this.activeIndex = to.path
    })
  },
  mounted() {
  // 监听登录成功事件
  this.emitter.on('login-success', this.handleLoginStatusChanged);
},
beforeUnmount() {
  // 移除事件监听
  this.emitter.off('login-success', this.handleLoginStatusChanged);
},
 methods: {
  checkLoginStatus() {
    // 从 localStorage 中获取当前登录的用户信息
    const currentUser = JSON.parse(localStorage.getItem('currentUser') || 'null');
    if (currentUser) {
      // 更新登录状态
      this.isLoggedIn = true;
      this.username = currentUser.username;
      this.userType = currentUser.userType; // 设置 userType
      this.userAvatar = currentUser.userType === 'merchant'
        ? require('@/assets/merchant-avatar.png')
        : require('@/assets/user-avatar.png');
    } else {
      // 未登录状态
      this.isLoggedIn = false;
      this.username = '';
      this.userAvatar = '';
      this.userType = '';
    }
  },
  handleLoginStatusChanged(userData) {
    this.isLoggedIn = true;
    this.username = userData.username;
    this.userType = userData.userType;
    this.userAvatar = userData.userType === 'merchant'
      ? require('@/assets/merchant-avatar.png')
      : require('@/assets/user-avatar.png');
  },
  handleCommand(command) {
    switch (command) {
      case 'profile':
        this.$router.push('/profile');
        break;
      case 'logout':
        this.handleLogout();
        break;
    }
  },
   handleLogout() {
    this.$confirm('确认退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 清除当前用户信息
      localStorage.removeItem('currentUser');
      // 更新状态
      this.isLoggedIn = false;
      this.username = '';
      this.userAvatar = '';
      this.userType = '';
      // 跳转到首页
      this.$router.push('/');
      this.$message.success('已退出登录');
    });
  },
  handleMobileMenuSelect(index) {
    if (index === 'logout') {
      this.handleLogout();
    } else {
      this.$router.push(index);
    }
    this.showMobileMenu = false;
  }
}
}
</script>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.el-header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  z-index: 1000;
  height: 60px;
  line-height: 60px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: bold;
}

.logo a {
  color: #409EFF;
  text-decoration: none;
}

.nav-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.user-section {
  display: flex;
  align-items: center;
  min-width: 120px;
  justify-content: flex-end;
  margin-right: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.username {
  color: #606266;
  font-size: 14px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-buttons {
  display: flex;
  gap: 16px;
}

.auth-buttons .el-button {
  padding: 0 12px;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  transition: all 0.3s ease;
}

.auth-buttons .el-button:hover {
  color: #409EFF;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.el-dropdown-menu {
  padding: 5px 0;
}

.el-dropdown-menu__item {
  padding: 8px 20px;
  font-size: 14px;
  line-height: 1.5;
}

.el-dropdown-menu__item:hover {
  background-color: #f5f7fa;
  color: #409EFF;
}

.el-main {
  padding-top: 80px;
  min-height: calc(100vh - 60px);
  background-color: #f5f7fa;
}

.hamburger-btn {
  padding: 8px;
}

.hamburger-btn .el-icon {
  font-size: 24px;
}

.mobile-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.mobile-menu-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.close-btn {
  padding: 4px;
}

.mobile-nav-menu {
  border-right: none;
}

.mobile-nav-menu .el-menu-item {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  padding: 0 16px;
}

.mobile-nav-menu .el-menu-item.is-active {
  color: #409EFF;
  background-color: #ecf5ff;
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .logo {
    position: static;
    transform: none;
    margin-right: 0;
  }
  
  .header-content {
    justify-content: center;
  }
  
  .nav-right {
    position: absolute;
    right: 20px;
  }
  
  .user-section {
    display: none;
  }
}
</style>
